<template>
  <div>
    <h1>Select 选择器</h1>
    <!--  value也就是option.id的值会赋值给optionid  -->
    <el-select ref="selects" @focus="focusEvent" v-model="optionid" placeholder="请选择">
      <el-option
        v-for="option in options"
        :label="option.name"
        :value="option.id"
        :key="option.id">
      </el-option>
    </el-select>
    <el-button @click="test">测试方法</el-button>
    <br>
    <h2>多选</h2>

    <el-select v-model="optionids" multiple placeholder="请选择">
      <el-option
        v-for="option in options"
        :label="option.name"
        :value="option.id"
        :key="option.id">
      </el-option>
    </el-select>
    <br>
    <el-select v-model="optionids" clearable multiple placeholder="请选择">
      <el-option
        v-for="option in options"
        :label="option.name"
        :value="option.id"
        :key="option.id">
      </el-option>
    </el-select>
    <br>
    <h2>change 事件</h2>
    <el-select v-model="optionids" @change="changeEvent" clearable multiple placeholder="请选择">
      <el-option
        v-for="option in options"
        :label="option.name"
        :value="option.id"
        :key="option.id">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "Select",
  data() {
    return{
      options:[
        {id:'1',name:"科技部"},
        {id:'2',name:"研发部"},
        {id:'3',name:"运维部"},
      ],
      optionid: '3',
      optionids: []
    }
  },
  methods: {
    changeEvent(value) {
      console.log(value);
    },
    test() {
      this.$refs.selects.focus()
    },
    focusEvent() {
      console.log("获得焦点");
    }
  }
}
</script>

<style scoped>

</style>
